<template>
  <div class="DemoComponent Demo">
    <div class="part">
      <m-title>弹窗</m-title>
      <m-dialog title="提示" v-model="dialog.visible">
        <div class="dialog-content">一个普通的弹窗</div>
        <span slot="footer" class="dialog-footer">
          <m-button type="primary" @click="dialog.visible = false"
            >确 定</m-button
          >
          <m-button @click="dialog.visible = false">取 消</m-button>
        </span>
      </m-dialog>
      <m-button type="primary" @click="dialog.visible = true"
        >打开弹窗</m-button
      >
      <codemirror class="editor" v-model="code.MDialog"></codemirror>
    </div>

    <div class="part">
      <m-title>主题</m-title>
      <change-theme v-model="ChangeTheme.visible"></change-theme>
      <m-button type="primary" @click="ChangeTheme.visible = true"
        >切换主题</m-button
      >
    </div>

    <div class="part">
      <m-title>按钮和消息</m-title>
      <div class="item">
        <m-button @click="$m.message('消息')">默认消息</m-button>
        <m-button type="success" @click="$m.message('成功', 'success')"
          >成功消息</m-button
        >
        <m-button type="danger" @click="$m.message('错误', 'error')"
          >错误消息</m-button
        >
      </div>
      <div class="item">
        <m-link>文字按钮</m-link>
        <m-link type="default">文字按钮</m-link>
      </div>
      <codemirror class="editor" v-model="code.MButton"></codemirror>
    </div>

    <div class="part">
      <m-title>下拉弹窗</m-title>
      <div class="item">
        <m-dropdown>
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <m-dropdown-menu slot="dropdown">
            <m-dropdown-item>黄金糕</m-dropdown-item>
            <m-dropdown-item>狮子头</m-dropdown-item>
            <m-dropdown-item>螺蛳粉</m-dropdown-item>
            <m-dropdown-item disabled>双皮奶</m-dropdown-item>
            <m-dropdown-item divided>蚵仔煎</m-dropdown-item>
          </m-dropdown-menu>
        </m-dropdown>
        <codemirror class="editor" v-model="code.MButton"></codemirror>
      </div>
    </div>

    <div class="part">
      <m-title>树形控件</m-title>
      <m-tree :data="MTree.data" :props="MTree.defaultProps"></m-tree>
      <codemirror class="editor" v-model="code.MTree"></codemirror>
    </div>

    <div class="part">
      <m-title>标签页</m-title>
      <m-tabs v-model="MTabs">
        <m-tab-pane label="我的行程" name="a">我的行程</m-tab-pane>
        <m-tab-pane label="消息中心" name="b">消息中心</m-tab-pane>
        <m-tab-pane label="角色管理" name="c">角色管理</m-tab-pane>
      </m-tabs>
      {{ MTabs }}
      <codemirror class="editor" v-model="code.MTabs"></codemirror>
    </div>

    <div class="part">
      <m-title>开关</m-title>
      <m-switch v-model="MSwitch"></m-switch>
      <i class="gap"></i>
      <m-switch
        v-model="MSwitch"
        active-text="正常"
        inactive-text="禁用"
      ></m-switch>
      <i class="gap"></i>
      {{ MSwitch }}
      <codemirror class="editor" v-model="code.MSwitch"></codemirror>
    </div>

    <div class="part">
      <m-title>步骤条</m-title>
      <m-steps :active="1">
        <m-step
          title="步骤 1"
          description="这是一段很长很长很长的描述性文字"
        ></m-step>
        <m-step
          title="步骤 2"
          description="这是一段很长很长很长的描述性文字"
        ></m-step>
        <m-step title="步骤 3" description="这段就没那么长了"></m-step>
      </m-steps>
      <codemirror class="editor" v-model="code.MSteps"></codemirror>
    </div>

    <div class="part">
      <m-title>权限</m-title>
      <div v-auth="['home']">666</div>
      <codemirror class="editor" v-model="code.MAuth"></codemirror>
    </div>

    <div class="part">
      <m-title>图标icon</m-title>
      <m-icon name="plus"></m-icon>
      <i class="gap"></i>
      <m-icon name="document"></m-icon>
      <i class="gap"></i>
      <m-icon name="edit"></m-icon>
      <i class="gap"></i>
      <m-icon name="delete"></m-icon>
      <codemirror class="editor" v-model="code.MIcon"></codemirror>
    </div>

    <div class="part">
      <m-title>title</m-title>
      <codemirror class="editor" v-model="code.MTitle"></codemirror>
    </div>

    <div class="part">
      <m-title>结果</m-title>
      <m-row>
        <m-col :sm="12" :lg="6">
          <m-result
            icon="success"
            title="成功提示"
            subTitle="请根据提示进行操作"
          >
            <template slot="extra">
              <m-button type="primary" @click="$m.close()">关闭</m-button>
            </template>
          </m-result>
        </m-col>
        <m-col :sm="12" :lg="6">
          <m-result
            icon="warning"
            title="警告提示"
            subTitle="请根据提示进行操作"
          >
            <template slot="extra">
              <m-button type="primary" @click="$m.close()">关闭</m-button>
            </template>
          </m-result>
        </m-col>
        <m-col :sm="12" :lg="6">
          <m-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
            <template slot="extra">
              <m-button type="primary" @click="$m.close()">关闭</m-button>
            </template>
          </m-result>
        </m-col>
        <m-col :sm="12" :lg="6">
          <m-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
            <template slot="extra">
              <m-button type="primary" @click="$m.close()">关闭</m-button>
            </template>
          </m-result>
        </m-col>
      </m-row>
      <codemirror class="editor" v-model="code.MResult"></codemirror>
    </div>

    <div class="part">
      <m-title>卡片</m-title>
      <m-card>
        <m-title slot="header">
          卡片头部
          <m-button type="primary" class="fr">添加</m-button>
        </m-title>
        卡片内容
      </m-card>
      <codemirror class="editor" v-model="code.MCard"></codemirror>
    </div>

    <div class="part">
      <m-title>标签</m-title>
      <m-tag>标签一</m-tag> <i class="gap"></i>
      <m-tag type="success">标签二</m-tag> <i class="gap"></i>
      <m-tag type="info">标签三</m-tag> <i class="gap"></i>
      <m-tag type="warning">标签四</m-tag> <i class="gap"></i>
      <m-tag type="danger">标签五</m-tag>
      <codemirror class="editor" v-model="code.MTag"></codemirror>
    </div>

    <div class="part iconfont">
      <m-title>字体图标</m-title>
      <div>
        <i
          class="iconfont"
          :class="'icon-' + item.font_class"
          v-for="item in iconfont.glyphs"
        ></i>
      </div>
    </div>

    <div class="part">
      <m-title>无数据</m-title>
      <div>
        <m-no-data>
          <m-button type="primary">按钮</m-button>
        </m-no-data>
      </div>
      <codemirror class="editor" v-model="code.MNoData"></codemirror>
    </div>
  </div>
</template>

<script>
import CodeMirror from "@/MUI/utils/CodeMirror";
import iconfont from "@/MUI/font/iconfont/iconfont.json";
import Vue from "vue";
export default {
  name: "DemoComponent",
  data() {
    return {
      dialog: {
        visible: false,
      },
      ChangeTheme: {
        visible: false,
      },
      MTree: {
        data: [
          {
            label: "一级 1",
            children: [
              {
                label: "二级 1-1",
                children: [
                  {
                    label: "三级 1-1-1",
                  },
                ],
              },
            ],
          },
          {
            label: "一级 2",
            children: [
              {
                label: "二级 2-1",
                children: [
                  {
                    label: "三级 2-1-1",
                  },
                ],
              },
              {
                label: "二级 2-2",
                children: [
                  {
                    label: "三级 2-2-1",
                  },
                ],
              },
            ],
          },
          {
            label: "一级 3",
            children: [
              {
                label: "二级 3-1",
                children: [
                  {
                    label: "三级 3-1-1",
                  },
                ],
              },
              {
                label: "二级 3-2",
                children: [
                  {
                    label: "三级 3-2-1",
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
      },
      MTabs: "c",
      MSwitch: 1,
      codeOption: {
        language: "html",
        lineNumbers: true,
      },
      iconfont: iconfont,
      code: {
        MDialog:
          "<m-dialog\n" +
          '  title="提示"\n' +
          '  v-model="dialog.visible"\n' +
          ">\n" +
          '  <div class="dialog-content">\n' +
          "    一个普通的弹窗\n" +
          "  </div>\n" +
          '  <span slot="footer" class="dialog-footer">\n' +
          '    <m-button type="primary" @click="dialog.visible = false">确 定</m-button>\n' +
          '    <m-button  @click="dialog.visible = false">取 消</m-button>\n' +
          "  </span>\n" +
          "</m-dialog>",
        MButton:
          "<m-button @click=\"$m.message('消息')\">默认消息</m-button>\n" +
          "<m-button type=\"success\" @click=\"$m.message('成功','success')\">成功消息</m-button>\n" +
          "<m-button type=\"danger\" @click=\"$m.message('错误','error')\">错误消息</m-button>\n" +
          "<m-link>文字按钮</m-link>>\n" +
          '<m-link type="default">文字按钮</m-link>',
        MDropdown:
          "<m-dropdown>\n" +
          '  <span class="el-dropdown-link">\n' +
          '    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>\n' +
          "  </span>\n" +
          '  <m-dropdown-menu slot="dropdown">\n' +
          "    <m-dropdown-item>黄金糕</m-dropdown-item>\n" +
          "    <m-dropdown-item>狮子头</m-dropdown-item>\n" +
          "    <m-dropdown-item>螺蛳粉</m-dropdown-item>\n" +
          "    <m-dropdown-item disabled>双皮奶</m-dropdown-item>\n" +
          "    <m-dropdown-item divided>蚵仔煎</m-dropdown-item>\n" +
          "  </m-dropdown-menu>\n" +
          "</m-dropdown>",
        MTree:
          '<m-tree :data="MTree.data" :props="MTree.defaultProps"></m-tree>',
        MTabs:
          '<m-tabs v-model="MTabs">\n' +
          '  <m-tab-pane label="我的行程" name="a">我的行程</m-tab-pane>\n' +
          '  <m-tab-pane label="消息中心" name="b">消息中心</m-tab-pane>\n' +
          '  <m-tab-pane label="角色管理" name="c">角色管理</m-tab-pane>\n' +
          "</m-tabs>",
        MSwitch:
          '<m-switch v-model="MSwitch"></m-switch>\n' +
          '<m-switch v-model="MSwitch" active-text="正常" inactive-text="禁用"></m-switch>',
        MSteps:
          '<m-steps :active="1">\n' +
          '  <m-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></m-step>\n' +
          '  <m-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></m-step>\n' +
          '  <m-step title="步骤 3" description="这段就没那么长了"></m-step>\n' +
          "</m-steps>",
        MAuth: "<div v-auth=\"['home']\">666</div>",
        MIcon: '<m-icon name="plus"></m-icon>',
        MTitle: "<m-title>title</m-title>",
        MResult:
          '<m-result icon="success" title="成功提示" subTitle="请根据提示进行操作">\n' +
          '  <template slot="extra">\n' +
          '    <m-button type="primary" @click="$m.close()">关闭</m-button>\n' +
          "  </template>\n" +
          "</m-result>",
        MCard:
          "<m-card>\n" +
          '  <m-title slot="header">\n' +
          "    卡片头部\n" +
          '    <m-button type="primary" class="fr">添加</m-button>\n' +
          "  </m-title>\n" +
          "  卡片内容\n" +
          "</m-card>",
        MTag:
          '<m-tag type="success">标签二</m-tag>\n' +
          '<m-tag type="info">标签三</m-tag>\n' +
          '<m-tag type="warning">标签四</m-tag>\n' +
          '<m-tag type="danger">标签五</m-tag>',
        MNoData:
          "<m-no-data>\n" +
          ' <m-button type="primary">按钮</m-button>\n' +
          "</m-no-data>",
      },
    };
  },
  components: {},
  created() {
    Vue.use(CodeMirror);
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";

.iconfont {
  font-size: px2(32);
}
</style>
